import React, { Component } from 'react';
// 使用 jquery加bootstrap进行编写
import { connect } from 'dva';
import { Modal, Row, Col, Form, Select, Input } from 'antd';
import './addSku.css';
import form from '../../../models/form';

const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 6 },
    },
    wrapperCol: {  
      xs: { span: 24 },
      sm: { span: 16 },
    },
};
const FormItem = Form.Item;
const Option = Select.Option;
// 一级分类
const OneClassTm = ({
    template,
    click,
    store
}) => {
    // 这里判断二级分类和三级分类有没有数据
    if(!store.value) {
        return (
            <div style={{ textAlign: "center" }} onClick={ click }>
                +
            </div>
        );
    } else {
        return (
            <div className="template" onClick={ click }>
                <div>{JSON.parse(store.fullName)[0].name}</div>
                <div>{JSON.parse(store.fullName)[0].brand}</div>
                <div>{JSON.parse(store.fullName)[0].code}</div>
            </div>
        );
    }
}

// 二级分类
const TwoClassTm = ({
    template,
    click,
    store
}) => {
    console.log('二级分类的值');
    console.log(store);
    if(!store.value) {
        return (
            <div style={{ textAlign: "center" }} onClick={ click }>
                +
            </div>
        );
    } else {
        return (
            <div className="template" onClick={ click }>
                <div>{JSON.parse(store.fullName)[1].name}</div>
                <div>{JSON.parse(store.fullName)[1].brand}</div>
                <div>{JSON.parse(store.fullName)[1].code}</div>
            </div>
        );
    }
}

// 一级分类模板
const OneClassModel = ({
    skuCode,
    template,
    data,
    isShow,
    hideModel,
    form,
    saveTemplate,
    dispatch,
    store,
    aliasName
}) => {
    if(!data) {
        return null;
    }
    const { getFieldDecorator } = form;
    const oneSelectChange = function(value) {
        data.map((item, index) => {
            if(item.id === value) {
                dispatch({
                    type: 'list/makeDropValReducer',
                    data: {
                        index: 0,
                        skuCode: item.skuCode,
                        aliasName: item.aliasName
                    },
                    payload: {
                        value: value,
                        text: item.text,
                        aliasName: item.aliasName,
                        skuCode: item.skuCode,
                        fullName: item.fullName
                    }
                });
            }
        });
    }

    return (
        <Modal
          className="addSkuModel"
          title="一级分类"
          visible={isShow}
          onCancel={hideModel}
          onOk={saveTemplate}
        >
            <Form>
                <FormItem
                    {...formItemLayout}
                    label="名称"
                    >   
                        {getFieldDecorator('skuValue', {
                            initialValue: "",
                            rules: [{ required: true, message: '名称' }],
                        })(
                            <Select name="skuValue" id="skuValue" onSelect={oneSelectChange}>
                                {
                                    data.map(function(item, index) {
                                        return (
                                            <Option value={item.id} key={index}> {
                                                item.text
                                            } </Option>
                                        );
                                    })
                                }
                            </Select>
                        )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="别名/俗称"
                    >
                    {getFieldDecorator('aliasName', {
                            initialValue: aliasName ? aliasName : data[0] ? data[0].aliasName : "",
                        rules: [{ required: false, message: '别名/俗称' }],
                    })(
                        <Input disabled/>
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="分类编号"
                    >
                    {getFieldDecorator('skuCode', {
                        initialValue: skuCode ? skuCode : data[0] ? data[0].skuCode : "",
                        rules: [{ required: false, message: '分类编号'}],
                    })(
                        <Input disabled/>
                    )}
                </FormItem>
            </Form>
        </Modal>
    );
}

// 二级分类模板
const TwoClassModel = ({
    skuCode,
    template,
    data,
    isShow,
    hideModel,
    form,
    saveTemplate,
    dispatch,
    store,
    aliasName
}) => {
    if(!data) {
        return null;
    }
    const { getFieldDecorator } = form;
    const twoSelectChange = function(value) {
        data.map((item, index) => {
            if(item.id === value) {
                dispatch({
                    type: 'list/makeDropValReducer',
                    data: {
                        index: 1,
                        skuCode: item.skuCode,
                        aliasName: item.aliasName
                    },
                    payload: {
                        value: value,
                        text: item.text,
                        aliasName: item.aliasName,
                        skuCode: item.skuCode,
                        fullName: item.fullName
                    }
                });
            }
        });
    }
    console.log('二级分类');
    console.log(data);
    return (
        <Modal
          className="addSkuModel"
          title="一级分类"
          visible={isShow}
          onCancel={hideModel}
          onOk={saveTemplate}
        >
            <Form>
                <FormItem
                    {...formItemLayout}
                    label="名称"
                    >   
                        {getFieldDecorator('skuValue', {
                            initialValue: "",
                            rules: [{ required: true, message: '名称' }],
                        })(
                            <Select name="skuValue" id="skuValue" onSelect={twoSelectChange}>
                                {
                                    data.map(function(item, index) {
                                        return (
                                            <Option value={item.id} key={index}> {
                                                item.text
                                            } </Option>
                                        );
                                    })
                                }
                            </Select>
                        )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="别名/俗称"
                    >
                    {getFieldDecorator('aliasName', {
                            initialValue: aliasName ? aliasName : data[0] ? data[0].aliasName : "",
                        rules: [{ required: false, message: '别名/俗称' }],
                    })(
                        <Input disabled/>
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="分类编号"
                    >
                    {getFieldDecorator('skuCode', {
                        initialValue: skuCode ? skuCode : data[0] ? data[0].skuCode : "",
                        rules: [{ required: false, message: '分类编号'}],
                    })(
                        <Input disabled/>
                    )}
                </FormItem>
            </Form>
        </Modal>
    );
}

@Form.create()
@connect(({ list, loading }) => ({
    list,
    loading: loading.models.list,
}))
class AddSku extends Component {

    constructor() {
        super();
       
        this.state = {
            oneShow: false,
            twoShow: false
        };
    }

    // 点击一级分类的时候会触发点击事件 判断后两级是否有数据
    oneClick = ( ) => {
        const { dispatch } = this.props;
        dispatch({
            type: 'list/queryDrop',
            payload: {
                id: 0
            },
            index: 0
        });

        this.setState({
            oneShow: true
        });
    }

    // 分类一保存
    oneSave = () => {
        const { 
            dispatch,
            list
         } = this.props;
        dispatch({
            type: 'list/makeVals',
            data: {
                index: 0,
                ...list.oneTemplate
            }
        });
        // 保存到reducer里面
        this.setState({
            oneShow: false            
        });
    }

    // 隐藏弹出框
    hideOneModel = () => {
        const { dispatch } = this.props;
        dispatch({
            type: 'list/makeVals',
            data: {
                index: 4
            }
        });
        this.setState({
            oneShow: false            
        });
    }

    // 显示一级分类
    showOneModel = () => {
        this.setState({
            oneShow: true            
        });
    }


    // 二级分类
    twoClick = ( ) => {
        const { dispatch, list } = this.props;
        dispatch({
            type: 'list/queryDrop',
            payload: {
                id: list.oneStore.value
            },
            index: 1
        });

        this.setState({
            twoShow: true
        });
    }

    // 隐藏弹出框
    hideTwoModel = () => {
        const { dispatch } = this.props;
        dispatch({
            type: 'list/makeVals',
            data: {
                index: 4
            }
        });
        this.setState({
            twoShow: false            
        });
    }

    // 分类一保存
    twoSave = () => {
        const { 
            dispatch,
            list
         } = this.props;
        dispatch({
            type: 'list/makeVals',
            data: {
                index: 1,
                ...list.twoTemplate
            }
        });
        // 保存到reducer里面
        this.setState({
            twoShow: false            
        });
    }

    render() {

        const { 
            list,
            dispatch 
        } = this.props;
        const { selectDrop } = list;
        return (
            <div>
                <div className="addSku table-responsive">
                    <table className="table table-bordered">
                        <thead>
                            <tr>
                                <th>一级分类</th>
                                <th>二级分类</th>
                                <th>三级分类</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <OneClassTm 
                                        template={list.oneTemplate}
                                        store={list.oneStore} 
                                        click={ this.oneClick }
                                        dispatch={ dispatch }
                                        />
                                </td>
                                <td>
                                    <TwoClassTm 
                                        template={list.twoTemplate} 
                                        store={list.twoStore} 
                                        click={ this.twoClick }
                                        dispatch={ dispatch }
                                        />
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <OneClassModel
                        skuCode={list.oneSkuCode}
                        aliasName={list.oneAliasName} 
                        template={list.oneTemplate} 
                        store={list.oneStore}
                        data={selectDrop ? selectDrop.data : []} 
                        isShow={this.state.oneShow} 
                        hideModel={this.hideOneModel} 
                        form={this.props.form}
                        saveTemplate={this.oneSave}
                        dispatch={ dispatch }
                    />
                    <TwoClassModel 
                        skuCode={list.twoSkuCode}
                        template={list.twoTemplate} 
                        store={list.twoStore}
                        aliasName={list.twoAliasName} 
                        data={selectDrop ? selectDrop.data : []} 
                        isShow={this.state.twoShow} 
                        hideModel={this.hideTwoModel} 
                        form={this.props.form}
                        saveTemplate={this.twoSave}
                        dispatch={ dispatch }
                    />
                </div>  
            </div>  
        );
    }
}

export default AddSku;